Description

This pull request introduces a new PopoverButton (@beta), which is a wrapper around the Popover primitive. It handles focus-locking, opening, closing, auto-focus, setting appropriate ARIA attributes, and more. The following PopoverProps are omitted, replaced, or added:

• content: replaced with renderContent to allow providing values in the render callback (isOpen).
• open: omitted, as the open state is controlled internally by the PopoverButton.
• referenceElement: omitted, as the rendered button is always the reference.
• children: omitted, as the rendered button will be the children.
• ariaHasPopUp: added to ensure that this value is included in the rendered button for a11y.

Example 1:

<PopoverButton
  ariaHasPopUp="menu"
  renderButton={({isOpen}) => <button>{isOpen ? 'Close' : 'Open'}</button>}
  renderContent={({close}) => (
    <div role="menu">
      <button role="menuitem" onClick={close}>Item 1</button>
      <button role="menuitem" onClick={close}>Item 2</button>
      <button role="menuitem" onClick={close}>Item 3</button>
    </div>
  )}
/>

Example 2:

<PopoverButton
  ariaHasPopUp="true"
  renderButton={({isOpen}) => <button>{isOpen ? 'Close' : 'Open'}</button>}
  renderContent={({close}) => (
    <div>
      <p>Popover content</p>

      <button onClick={close}>Close</button>
    </div>
  )}
/>